<template>
  <div class="main-content" style="margin: 20px auto">
    <div style="position: relative;">
      <div v-for="type in typeList" :key="type" style="margin-bottom: 20px" >
        <strong style="margin-right: 20px">{{ type }}</strong>
        <span @click="loadNotebookList(1, item.name)" :class="{ 'category-active' : selectedCategory === item.name }"
              style="margin-right: 20px; cursor: pointer"
              v-for="item in categoryList.filter(v => v.type === type)">{{ item.name }}</span>
      </div>
      <div style="position: absolute; right: 0; bottom: 20px;" v-if="tableData&&tableData.length">
        <el-dropdown split-button type="primary">
          {{ showOrder }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="showOrder !=='时间倒序'"><a @click="handleClick('reverse','时间倒序')">时间倒序</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="showOrder !=='时间正序'"><a @click="handleClick('positive','时间正序')">时间正序</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="showOrder !=='浏览数'"><a @click="handleClick('count','浏览数')">浏览数</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="showOrder !=='收藏数'"><a @click="handleClick('collect','收藏数')">收藏数</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="showOrder !=='点赞数'"><a @click="handleClick('like','点赞数')">点赞数</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="showOrder !=='评论数'"><a @click="handleClick('comment','评论数')">评论数</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="showOrder !=='热度'"><a @click="handleClick('hot','热度')">热度</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
      <div style="min-height: 300px" v-if="tableData&&tableData.length">
        <el-row :gutter="10">
          <el-col :span="6" v-for="item in tableData" :key="item.id">
            <div style="cursor: pointer; margin-bottom: 10px" @click="goDetail('/front/notebookDetail?id=' + item.id)">
              <img :src="item.cover" alt="" style="width: 100%; height: 150px; border-radius: 5px 5px 0 0">
              <div style="margin: 5px 0; font-size: 16px" class="line1">{{ item.title }}</div>
              <div style="color: #666">发布者:{{ item.userName }}</div>
              <div style="color: #666;margin-top: 5px">发布时间:{{ item.releaseTime }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    <div v-else>
      <el-card style="text-align: center; padding: 100px 0" >
        <img src="@/assets/imgs/无数据.png" alt="" style="width: 100px">
        <div style="color: #999">无数据</div>
      </el-card>
    </div>

    <div style="margin: 20px 0" v-if="total">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  name: "Notebook",
  data() {
    return {
      categoryList: [],
      typeList: [],
      category: null,
      pageNum: 1,
      pageSize: 8,
      total: 0,
      tableData: [],
      searchKeyword: this.$route.query.searchKeyword,
      orderType: "reverse",
      showOrder: "时间倒序",
      selectedCategory:'',
    }
  },
  created() {
    this.loadCategory()
    this.loadNotebookList(1, null)
  },
  methods: {
    goDetail(path) {
      location.href = path
    },
    loadNotebookList(pageNum, category) {
      if (pageNum) this.pageNum = pageNum
      if (category) this.category = category
      if (category) this.selectedCategory=category
      if (this.orderType==='count'||this.orderType==='reverse'||this.orderType==='positive')
      {
        this.$request.get('/notebook/listBySearchKeyword', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            category: this.category,
            searchKeyword: this.searchKeyword,
            orderType: this.orderType,
          }
        }).then(res => {
          this.tableData = res.data?.list
          this.total = res.data?.total
        })
      }else{
        this.$request.get('/notebook/listBySearchKeywordCount', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            category: this.category,
            searchKeyword: this.searchKeyword,
            orderType: this.orderType,
          }
        }).then(res => {
          this.tableData = res.data?.list
          this.total = res.data?.total
        })
      }
    },
    handleCurrentChange(pageNum) {
      this.loadNotebookList(pageNum, null)
    },
    loadCategory() {
      this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
        this.typeList = new Set(this.categoryList.map(v => v.type))
      })
    },
    handleClick(order, show) {
      this.orderType = order
      this.showOrder = show
      this.loadNotebookList(1, null)
    }
  }
}
</script>

<style scoped>
.category-active {
  color: #f59300;
  font-weight: bold;
}
</style>